<!-- 功能  磁盘检测弹窗 | 作者：menghao.yan | 邮箱：yxs2615@163.com | 时间：2023年08月24日 14:23:00 -->
<template>
  <!-- 弹出框 -->
  <a-modal v-model:open="visible" title="磁盘检测" width="800px" class="y-modal" okText="创建" @ok="onSubmit" @cancel="onCancel">
    <a-tabs v-model:activeKey="activeKey" type="card" class="y-tabs">
      <a-tab-pane key="ciPanJianCe" tab="磁盘检测">
        <a-card>
          <a-row align="middle">
            <a-col :span="24">
              <a-space>
                <a-button type="link" class="y-btn" @click="">
                  <template #icon>
                    <plus-outlined />
                  </template>
                  批量快速检测
                </a-button>
                <a-button type="link" class="y-btn" @click="">
                  <template #icon>
                    <plus-outlined />
                  </template>
                  批量全面检测
                </a-button>
                <a-button type="link" class="y-btn" @click="">
                  <template #icon>
                    <sync-outlined />
                  </template>
                  刷新
                </a-button>
              </a-space>
            </a-col>
          </a-row>
          <a-table bordered :data-source="dataSourceCiPanJianCe" :columns="columnsCiPanJianCe" class="y-table" :pagination="false"
                   :row-selection="{ selectedRowKeys: state.selectedRowKeysCiPanJianCe, onChange: onSelectChangeCiPanJianCe }">
            <template #bodyCell="{ text, column, record }">
              <template v-if="column.key === 'ciPanJianCe'">
                <a-space>
                  <span>{{text}}</span>
                  <a-tooltip color="#2e6e9e" placement="right">
                    <template #title>操作</template>
                    <a-button type="link" @click="openCiPanJianCeCaoZuoModal">操作</a-button>
                  </a-tooltip>
                  <!-- 弹窗 -  磁盘检测操作 -->
                  <ciPanJianCeCaoZuoModal v-model:visible="visibleCiPanJianCeCaoZuoModal"></ciPanJianCeCaoZuoModal>
                </a-space>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-tab-pane>

      <a-tab-pane key="ciPanCeSu" tab="磁盘测速">
        <a-card>
          <a-row align="middle">
            <a-col :span="24">
              <a-space>
                <a-button type="link" class="y-btn" @click="">
                  <template #icon>
                    <plus-outlined />
                  </template>
                  测试
                </a-button>
              </a-space>
            </a-col>
          </a-row>
          <a-table bordered :data-source="dataSourceCiPanCeSu" :columns="columnsCiPanCeSu" class="y-table" :pagination="false"
                   :row-selection="{ selectedRowKeys: state.selectedRowKeysCiPanCeSu, onChange: onSelectChangeCiPanCeSu }">
            <template #bodyCell="{ text, column, record }">
              <template v-if="column.key === 'ceShi'">
                <a-space>
                  <a-tooltip color="#2e6e9e" placement="right">
                    <template #title>测试</template>
                    <a-button type="link" @click="ceShiHang">测试</a-button>
                  </a-tooltip>
                </a-space>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script setup>
import ciPanJianCeCaoZuoModal from './ciPanJianCeCaoZuoModal.vue'

import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { Modal } from 'ant-design-vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const { visible } = toRefs(props)

// 定义组件的事件
const emits = defineEmits(['update:visible'])

const activeKey = ref('ciPanJianCe')

const visibleCiPanJianCeCaoZuoModal = ref(false)

const openCiPanJianCeCaoZuoModal = () => {
  visibleCiPanJianCeCaoZuoModal.value = true
}

// -- 磁盘检测
// 表格列
const columnsCiPanJianCe = ref([
  {
    title: '设备',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    sorter: {
      compare: (a, b) => a.name.localeCompare(b.name),
      multiple: 1
    }
  },
  {
    title: '设备序列号',
    dataIndex: 'xuLieHao',
    key: 'xuLieHao',
    align: 'center',
    sorter: {
      compare: (a, b) => a.xuLieHao.localeCompare(b.xuLieHao),
      multiple: 2
    }
  },
  {
    title: '设备健康情况',
    dataIndex: 'sheBeiJianKangQingKuang',
    key: 'sheBeiJianKangQingKuang',
    align: 'center',
    sorter: {
      compare: (a, b) => a.sheBeiJianKangQingKuang.localeCompare(b.sheBeiJianKangQingKuang),
      multiple: 3
    }
  },
  {
    title: 'S.M.A.R.T状态',
    dataIndex: 'smartZhuangTai',
    key: 'smartZhuangTai',
    align: 'center',
    sorter: {
      compare: (a, b) => a.smartZhuangTai.localeCompare(b.smartZhuangTai),
      multiple: 4
    }
  },
  {
    title: '磁盘检测',
    dataIndex: 'ciPanJianCe',
    key: 'ciPanJianCe',
    align: 'center',
    sorter: {
      compare: (a, b) => a.ciPanJianCe.localeCompare(b.ciPanJianCe),
      multiple: 5
    }
  }
])

// 表格数据
const dataSourceCiPanJianCe = ref([
  {
    name: '硬盘',
    xuLieHao: '123456789',
    sheBeiJianKangQingKuang: '正常',
    smartZhuangTai: '正常',
    ciPanJianCe: '正常'
  }
])

// -- 磁盘测速

// 表格列
const columnsCiPanCeSu = ref([
  {
    title: '设备',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    sorter: {
      compare: (a, b) => a.name.localeCompare(b.name),
      multiple: 1
    }
  },
  {
    title: '测试',
    dataIndex: 'ceShi',
    key: 'ceShi',
    align: 'center',
    sorter: {
      compare: (a, b) => a.ceShi.localeCompare(b.ceShi),
      multiple: 2
    }
  },
  {
    title: '测试结果',
    dataIndex: 'ceShiJieGuo',
    key: 'ceShiJieGuo',
    align: 'center',
    sorter: {
      compare: (a, b) => a.ceShiJieGuo.localeCompare(b.ceShiJieGuo),
      multiple: 3
    }
  }
])

// 表格数据
const dataSourceCiPanCeSu = ref([
  {
    name: '硬盘',
    ceShi: '123456789',
    ceShiJieGuo: '正常',
    ciPanJianCe: '正常'
  }
])

const state = reactive({
  selectedRowKeysCiPanJianCe: [],
  selectedRowKeysCiPanCeSu: []
})
const onSelectChangeCiPanJianCe = selectedRowKeys => {
  console.log('磁盘检测 >  磁盘检测多选改变', selectedRowKeys)
  state.selectedRowKeysCiPanJianCe = selectedRowKeys
}

const onSelectChangeCiPanCeSu = selectedRowKeys => {
  console.log('磁盘测速 >  磁盘测速多选改变', selectedRowKeys)
  state.selectedRowKeysCiPanCeSu = selectedRowKeys
}

const ceShiHang = () => {
  Modal.confirm({
    title: '确认操作',
    icon: h(ExclamationCircleOutlined),
    content: '磁盘测试时可能影响磁盘的正常读取,建议您在磁盘空闲的时候测试,您确定要执行本次测试?',
    okText: '确定',
    okType: 'danger',
    cancelText: '取消',
    onOk() {
      console.log('OK')
    },
    onCancel() {
      console.log('Cancel')
    }
  })
}

const onSubmit = () => {
  console.log('外接UPS>>')
  onCancel()
}

const onCancel = () => {
  // 触发自定义事件来通知父组件关闭弹窗
  emits('update:visible', false)
}
</script>

<style scoped>
.ant-row {
  margin-bottom: 10px;
}
.y-close-jieneng {
  color: red;
}
</style>